
<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>资料</title>
		<link rel="stylesheet" href="../css/common.css">
		<style>
			.ziliao{
			margin: 1rem;
			padding: 0 .5rem;
			box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.349019607843137);
		}
		.selList{
			padding: 1rem 0;
			border-bottom: 1px solid #E4E4E4;
			display: flex;
			align-items: center;
		}
		input[type='checkbox']{
			width: .8rem;
			height: .8rem;
			background-color: #fff;
			-webkit-appearance:none;
			border: 1px solid #c9c9c9;
			border-radius: 1rem;
			outline: none;
		}
		input[type="checkbox"]:checked {
			/* background-color: #000; */
			background-image: url(../assets/yuan.png);
			background-size: 1.5rem;
			background-position: center;
		}
		.selList span{
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-left: 1rem;
		}
		.btm{
			position: fixed;
			width: 100%;
			display: flex;
			bottom: 0;
			align-items: center;
			height: 3rem;
			border-top: 1px solid #E4E4E4;
		}
		.allSel{
			padding-left: 1rem;
			width: 100%;
		}
		.allSel span{
			margin-left: .5rem;
		}
		#btn1{
			width: 10.5rem;
			height: 3rem;
			text-align: center;
			line-height: 3rem;
			background-color: #a1a1a1;
			border: none;
			color: #fff;
			font-size: 1.25rem;
			outline: none;
		}
	</style>

	</head>
	<body>
		<div class="tabsBox">
			<div class="topTab">
				<div class="tabLeft">
					<img src="../assets/left_J.png" >
				</div>
				<div class="tabCenters">资料</div>
				<!-- <div class="tabRight">收益说明</div> -->
			</div>
		</div>
		<div class="ziliao">
			<div class="selList">
				<input name="subBox" class="subBox" type="checkbox" value="01" />
				<span>抖音实战演练课第一节课资料.doc</span>
			</div>
			<div class="selList">
				<input name="subBox" class="subBox" type="checkbox" value="02" />
				<span>抖音实战演练课第一节课资料.doc</span>
			</div>
			<div class="selList">
				<input name="subBox" class="subBox" type="checkbox" value="03" />
				<span>抖音实战演练课第一节课资料.doc</span>
			</div>
			<div class="selList">
				<input name="subBox" class="subBox" type="checkbox" value="04" />
				<span>抖音实战演练课第一节课资料.doc</span>
			</div>
		</div>
		<div class="btm">
			<div class="allSel">
				<input id="checkAll" type="checkbox" value="111" />
				<span>全选</span>已选<span class="nums">0</span>文件
			</div>
			<button id="btn1">确定下载</button>
		</div>
	</body>
	<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="../js/common.js"></script>
	<script type="text/javascript">
		$(function() {
			var length = 0
			var len = $("input:checkbox").length - 1
			$('.subBox').click(function(){
				if (!$(".subBox").checked) {  
					$("#checkAll").prop("checked", false);  
				}
				length = $("input[type='checkbox']:checked").length
				if( length == len) {
					$("#checkAll").prop("checked", true); 
				}
				$('.nums').text(length)
			})
			/**
			 * 全选和全不选
			 */
			// console.log(leng)
			$("#checkAll").click(function() {
				length = len
				if (this.checked == true) {
					$('.nums').text(length)
					// length = len
					$("input[name='subBox']").each(function() {
						this.checked = true;
					})
				}
				if (this.checked == false) {
					$('.nums').text(0)
					$('input[name="subBox"]').each(function() {
						this.checked = false;
					})
				}
			});
			/**
			 * 显示选中的值
			 */
			$("#btn1").click(function() {
				$('input[name="subBox"]:checked').each(function() {
					// alert($(this).val())
					alert(this.value)
				})
			})
		});
	</script>
</html>
